class Chat {
    constructor(obj) {
        this.url = obj.serviceUrl
        this.headTitle = obj.headTitle
        this.headLogo = obj.headLogo
        this.isAutoOpen = false
        if (obj.isAutoOpen) {
            this.isAutoOpen = obj.isAutoOpen
        }
    }

    init() {
        if (document.getElementById("chat") == null) {
            
            window.addEventListener('message', function (e) {
                document.title = e.data
            })

            var chat = document.createElement("div");
            chat.id = 'chat';
            chat.style.width = '240px';
            chat.style.height = '56px';
            chat.style.background = 'rgb(255, 255, 255)';
            chat.style.position = 'fixed';
            chat.style.right = '12px';
            chat.style.bottom = '12px';
            chat.style.zIndex = '9999';
            chat.style.cursor = 'pointer';
            chat.style.boxShadow = 'rgba(0, 0, 0, 0.06) 0px 0px 12px';
            chat.style.borderRadius = '4px';
            document.body.appendChild(chat);

            var chatbox = document.createElement('chatbox');
            chatbox.id = 'chatbox';
            chatbox.style.width = '58px';
            chatbox.style.height = '56px';
            chatbox.style.float = 'right';
            chatbox.style.background = "#e01425 url('http://cdn.520wave.cn/wave-service/indeximg3.png') no-repeat 16px 11px";
            chatbox.style.borderRadius = '0 4px 4px 0';
            chat.appendChild(chatbox)

            var chattxt = document.createElement('chattxt');
            chattxt.id = 'chattxt';
            chattxt.innerHTML = '和我们在线交谈！';
            chattxt.style.width = '161px';
            chattxt.style.height = '56px';
            chattxt.style.float = 'right';
            chattxt.style.background = "url('http://cdn.520wave.cn/wave-service/indeximg4.png') no-repeat 154px 24px";
            chattxt.style.fontSize = '15px';
            chattxt.style.color = '#241919';
            chattxt.style.lineHeight = '56px';
            chattxt.style.paddingLeft = '21px';
            chat.appendChild(chattxt)
            
            chat.addEventListener('click', () => {
                this.showFrame()
            })
            if (this.isAutoOpen) {
                this.showFrame()
            }
        }
    }

    IsMobile() {
        let info = navigator.userAgent;
        let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
        for(let i = 0; i < agents.length; i++){
            if(info.indexOf(agents[i]) >= 0) return true;
        }
        return false;
    }

    showFrame() {
        var src = this.url + '?head_title=' + this.headTitle + '&head_logo=' + this.headLogo;
        console.log(src)
        var ua = navigator.userAgent
        if (this.IsMobile() && !(/micromessenger/.test(ua))) {
            window.location = src
        } else {
            if (document.getElementById("chatpup") == null) {
                window.addEventListener('message', e => {
                    if (e.data == 'close') {
                        document.getElementById("chatpup").style.display = "none";
                    }
                })

                var chatpup = document.createElement("div");
                chatpup.id = "chatpup";
                chatpup.style.background = "#FFFFFF";
                chatpup.style.width = "500px";
                chatpup.style.height = "600px";
                chatpup.style.position = "fixed";
                chatpup.style.display = "block";
                chatpup.style.right = "0";
                chatpup.style.bottom = "0";
                chatpup.style.zIndex = 2147483647;
                chatpup.style.overflow = "hidden";
                chatpup.style.borderTopLeftRadius = "5px";
                chatpup.style.borderTopRightRadius = "5px";
                chatpup.style.boxShadow = "0 0 20px 0 rgb(0 0 0 / 15%)";
                chatpup.style.cursor = "move";
                document.body.appendChild(chatpup);

                var iframe = document.createElement('iframe');
                iframe.src = src;
                iframe.height = '100%';
                iframe.width = '100%';
                iframe.style.border = "0";
                iframe.id = 'chat_iframe';
                chatpup.appendChild(iframe);

            } else {
                document.getElementById("chatpup").style.display = "block";
            }
        }
    }
}